<template>
	<view>
		<!-- F1:顶部搜索条 -->
		<view class="f1">
			<!-- 左侧:后退按钮 -->
			<uni-icons @click="goBack" class="back" type="back" size="50rpx" color="#fff"></uni-icons>
			<!-- 主体:搜索框 -->
			<uni-search-bar class="search" v-model="kw" @confirm="beginSearch" cancelButton="none"
				placeholder="请输入搜索关键字" @clear="clearResult" @input="doInput"></uni-search-bar>
		</view>
		<!-- F2:搜索结果列表 -->
		<uni-list>
			<!-- ellipsis:省略号,可取值:1或2 -->
			<!-- themb:缩略图 -->
			<!-- thumbSize:缩略图尺寸 -->
			<uni-list-item v-for="{lid,title,pic} in products" :key="lid" :title="title" :ellipsis="1" :thumb="base+pic"
				thumbSize="lg" link :to="`/pages/details/details?pid=${lid}`"></uni-list-item>
		</uni-list>
		<text v-show="showNoProducts" style="text-align: center;">没有查询到相关商品</text>
		<button class="has-more" v-show="hasMore" type="default" @click="goToList">查看更多</button>
		<!-- <text>{{products}}</text> -->
		<!-- F3:搜索建议 -->
		<uni-card class="search-suggest" title="热门搜索" isFull>
			<view class="card-content" @click="searchBySuggest">
				<!-- TODO:此处的建议应该来自于服务器端的接口数据 -->
				<uni-tag class="tag" text="苹果" data-kw="苹果" type="error"></uni-tag>
				<uni-tag class="tag" text="Apple" data-kw="Apple" type="warning"></uni-tag>
				<uni-tag class="tag" text="燃7000" data-kw="燃7000" type="success"></uni-tag>
				<uni-tag class="tag" text="小新" data-kw="小新" type="primary"></uni-tag>
				
				<!-- inverted:是否为空心标签 -->
				<uni-tag class="tag" text="笔记本" data-kw="笔记本" type="error" inverted></uni-tag>
				<uni-tag class="tag" text="工作站" data-kw="工作站" type="warning" inverted></uni-tag>
				<uni-tag class="tag" text="雷神7500" data-kw="雷神7500" type="success" inverted></uni-tag>
				<uni-tag class="tag" text="MacBook" data-kw="MacBook" type="primary" inverted></uni-tag>
				<!-- circle:是否为圆角 -->
				<uni-tag class="tag" text="苹果" data-kw="苹果" type="error" circle="true"></uni-tag>
				<uni-tag class="tag" text="Apple" data-kw="Apple" type="warning" circle="true"></uni-tag>
				<uni-tag class="tag" text="燃7000" data-kw="燃7000" type="success" circle="true"></uni-tag>
				<uni-tag class="tag" text="小新" data-kw="小新" type="primary" circle="true"></uni-tag>
				<uni-tag class="tag" text="笔记本" data-kw="笔记本" type="error" inverted circle="true"></uni-tag>
				<uni-tag class="tag" text="工作站" data-kw="工作站" type="warning" inverted circle="true"></uni-tag>
				<uni-tag class="tag" text="雷神7500" data-kw="雷神7500" type="success" inverted circle="true"></uni-tag>
				<uni-tag class="tag" text="MacBook" data-kw="MacBook" type="primary" inverted circle="true"></uni-tag>
			</view>
		</uni-card>
		<!-- F4:返回顶部 -->
		<xzGoTop></xzGoTop>
	</view>
</template>

<script>
	import {
		base,
		productList
	} from '../../service'
	export default {
		data() {
			return {
				kw: '戴尔', //用户在搜索框中输入的内容 -- keyword
				products: [], //根据关键字查询到的商品列表
				hasMore: false, //还有更多的数据要显示吗?
				base,
				showNoProducts: false, //是否显示"没有查询到相关商品" 
			}
		},
		methods: {
			searchBySuggest(e){
				//事件委托:由父元素来迟了众多子元素的事件
				//通过事件对象找到源头对象,再找该对象的数据集合
				console.log(e.target.dataset.kw)
				if(e.target.dataset.kw){
					this.kw = e.target.dataset.kw
				}
			},
			doInput() {
				if (this.timer) { //如果之前已经启动了定时器,必须先清除
					clearTimeout(this.timer) //停止定时器的工作
					this.timer = null //清空定时器的变量
				}
				this.timer = setTimeout(async () => {
					// this.beginSearch()
					//获取用户当前的输入
					let kw = this.kw.trim()
					//向服务器端接口发起异步请求,获取列表
					let {
						data,
						pageCount,
						pno
					} = await productList(1, kw)
					console.log(data)
					this.products = data //查询到的商品列表
					this.hasMore = pno < pageCount //如果当前页号小于总页数
					if (data.length === 0) {
						this.showNoProducts = true
					}
				}, 1000)
			},
			clearResult() {
				//清除之前的查询结果:可能1-商品列表存在数据  可能2:当前正在显示"没有查询到相关商品"
				this.products = []
				this.showNoProducts = false
				this.hasMore = false
			},
			goBack() {
				uni.navigateBack()
			},
			async beginSearch() {
				//获取用户当前的输入
				let kw = this.kw.trim()
				if (kw === "") {
					uni.showToast({
						title: '关键字不能为空', //提示文字
						icon: 'node', //提示图标:success\err\none\loading
						duration: 3000, //持续时长     
					})
					return //退出当前方法,不再继续执行
				}
				//向服务器端接口发起异步请求,获取列表
				let {
					data,
					pageCount,
					pno
				} = await productList(1, kw)
				console.log(data)
				this.products = data //查询到的商品列表
				this.hasMore = pno < pageCount //如果当前页号小于总页数
				if (data.length === 0) {
					this.showNoProducts = true
				}
			},
			goToList() {
				//导航跳转到商品列表页,并且提交查询参数:kw
				uni.navigateTo({
					url: '/pages/list/list?kw=' + this.kw.trim()
				})
			}
		}
	}
</script>

<style lang="scss">
	.f1 {
		background-color: $uni-color-primary;
		height: 44px;
		//弹性容器主轴方向:横向
		flex-direction: row;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		align-items: center;

		.search {
			flex: 1;
			margin-left: $uni-spacing-row-base;
		}
	}

	.has-more {
		background-color: $uni-bg-color-mask;
		color: $uni-text-color;
		margin: $uni-spacing-col-base 0;
		width: 100%;
	}

	.search-suggest {
		margin-top: $uni-spacing-col-lg !important;
		.card-content{
			//主轴方向:横向
			flex-direction: row;
			flex-wrap: wrap;
			.tag{
				margin-right: $uni-spacing-row-base;
				margin-bottom: $uni-spacing-col-base;
			}
		}
	}
</style>
